<template>
	<view class="detail">
		<view style="position: relative;">
			<swiper @change="changeSwiper" class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item class="swiper-item" v-for="(item,index) in banner" :key="index">
					<image :src="item" class="swiper-item-image" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="currentIndex">
				{{currentIndex}}/{{banner.length}}
			</view>
		</view>

		<view class="detail_price">
			<view class="detail_price_item">
				<text>￥</text>
				<text style="font-size: 36upx;font-weight: 700;margin: 0 10upx;">{{goods.price}}</text>
				<text>优惠价</text>
			</view>
			<view class="detail_price_oldprice">
				<text class="detail_price_oldprice_old">原价：￥{{goods.oldprice}}</text>
				<text class="detail_price_oldprice_line"></text>
				<text class="detail_price_oldprice_selled">已兑换：{{goods.buynum}}件</text>
			</view>
		</view>
		
		<view class="detail_info">
			<view class="detail_info_title">
				{{goods.title}}
			</view>
			<view class="detail_info_desc">
				{{goods.desc}}
			</view>
		</view>
		<view class="line"></view>
		<view class="detail_serve">
			<text style="color: #999;font-size: 28upx;margin-right: 20upx;">服务</text>
			<view class="detail_serve_item">
				<image src="../../static/money.png" mode=""></image>
				<text>诚信商家</text>
			</view>
			<view class="detail_serve_item">
				<image src="../../static/backhuo.png" mode=""></image>
				<text>退货保障</text>
			</view>
			<view class="detail_serve_item">
				<image src="../../static/seven.png" mode=""></image>
				<text>七天退换</text>
			</view>
			<icon class="icon icon-right" style="position: absolute;right: 20upx;"></icon>
		</view>
		<view class="line"></view>
		<view class="detail_serve" v-if="goods.shop.shopphone">
			<text style="color: #999;font-size: 28upx;margin-right: 20upx;">联系商家</text>
			<view class="detail_serve_item">
				
				<text>{{goods.shop.shopname}}</text>
			</view>
			<view class="detail_serve_item">
				
				<text>{{goods.shop.shopphone}}</text>
			</view>
			
		</view>
		<view class="line"  v-if="goods.shop.shopphone"></view>
		<view class="detail_contentbox">
			<view class="detail_contentbox_item active">
				商品详情
			</view>
			<!-- <view class="detail_contentbox_item">
				规格参数
			</view>
			<view class="detail_contentbox_item">
				用户评价(0)
			</view> -->
		</view>
		<view style="padding: 10px;" v-html="goods.content">
			{{goods.content}}
		</view>
		
		<view class="detail_bottom">
			<view class="detail_bottom_item" @tap="goIndex">
				<image src="../../static/icon1-s.png" mode=""></image>
				<text>首页</text>
			</view>
<!-- 			<view class="detail_bottom_item">
				<image src="../../static/favorite.png" mode=""></image>
				<text>收藏</text>
			</view>
			<view class="detail_bottom_item">
				<image src="../../static/share.png" mode=""></image>
				<text>分享</text>
			</view> -->
			<view class="detail_bottom_buybtn"  @click="gobuy()">
				立即购买
			</view>
		</view>
		<view class="popup" v-if="showServe">
			<view class="popup_shadow" @touchmove.prevent="" @tap="closeServe"></view>
			<view :class="showServeContent ? 'popup_content' : ''" v-if="showServeContent">
				
			</view>
		</view>
		
		<Login></Login>
			
			
			<view class="poptan" v-if="istan">
			    <view class="popshadow" @tap="close"></view>
			    <view class="popcontent" :style="'bottom:' + (isshow ? 0 : '-100%')">
			        <image src="/static/close.png" mode="aspectFit" class="close" @tap="close"></image>
			        <view class="goodinfo">
			            <image :src="goods.thumb" mode="aspectFill"></image>
			            <view>
			                <text class="goodname">{{ goods.title }}</text>
			                <view class="price">
			                    <view>
			                        <text>
			                            <text>￥</text>
			                            {{ goods.price*nums }}
			                            <text>/{{ goods.unit }}</text>
			                        </text>
			                        <text>￥{{ goods.oldprice }}</text>
			                    </view>
			                    <view>
			                        <text style="font-size: 24rpx; font-weight: normal; color: #c7c7c7">库存：{{ goods.kucun }}</text>
			                    </view>
			                </view>
			                <view class="caozuo">
			                    <text>已选{{ nums }}件</text>
			                    <view>
			                        <image src="/static/reduce.png" mode="aspectFit" @tap="reduce"></image>
			                        <text>{{ nums }}</text>
			                        <image src="/static/add.png" mode="aspectFit" @tap="add"></image>
			                    </view>
			                </view>
			            </view>
			        </view>
			        
			        <view class="goodbtn">
			            <text @tap="addcart">加入购物车</text>
			            <text @tap="imdbuy">立即购买</text>
			        </view>
			    </view>
			</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				currentIndex: 1,
				showServe: false,
				showServeContent: false,
				goodsid:0,
				goods:{shop:{shopname:'',shopphone:''}},
				isshow:0,
				istan:0,
				nums:1
			};
		},
		onLoad(options) {
			this.goodsid = options.id;
			this.getgoodsinfo();
		},
		methods: {
			imdbuy() {
			    var _this = this; // wx.navigateTo({
			    //   url: '/pages/order/submitorder?orderid=' + 123456
			    // })
				if (!uni.getStorageSync('token')) {
			        this.$store.commit("showLogin")
			        return false;
			    }
			    var data = {
			        goods:_this.goods,
					num:_this.nums,
			    };
				if(_this.goods.isdui) data['isdui'] = 1;
				
			    this.$http('center/createorder', data, function (res) {
			        if (res.code == 0) {
						_this.orderid = res.data.orderid
			            uni.navigateTo({
			                url: '/pages/order/submitorder?orderid=' + res.data.orderid
			            });
			        }
			    });
			},
			getgoodsinfo(){
				var that = this;
				that.$http('api/getgoodsinfo',{id:that.goodsid},function(res){
					that.banner = res.data.pics;
					that.goods = res.data;
				})
			},
			changeSwiper(e){
				this.currentIndex = e.detail.current + 1
			},
			goIndex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			openServe(){
				var that = this
				this.showServe = true
				setTimeout(() => {
					that.showServeContent = true
				},200)
			},
			closeServe(){
				this.showServe = false
				this.showServeContent = false
			},
			gobuy(){
				var token = uni.getStorageSync('token');
				if(!token){
					uni.showToast({
						title:'请登录',
						icon:'none'
					})
					this.$store.commit("showLogin")
				}else{
					var _this = this;
										
					var date = new Date();
					var ordercode = date.getTime();
					uni.setStorageSync('ordercode', ordercode);
					_this.istan= true
					setTimeout(function () {
					    _this.isshow= 1
					}, 100);
				}
			},
			close() {
				this.istan= 0
				this.isshow= 0
			},
			reduce() {
				
			    if (this.nums == 1) {
					uni.showToast({
						title:'已是最小购买数量',
						icon:'none'
					})
			        
			        return false;
			    }
			
			    this.nums--;
			    
			},
			
			add() {
				
			    // var num = +this.data.guigeinfo.data.num;
			    // if(this.data.info.data.maxnum > 0){
			    //   if(this.data.nums >= this.data.info.data.maxnum){
			    //     app.showtoast('本商品限购 ' + this.data.info.data.maxnum + '件');
			    //     return false;
			    //   }
			    // }
			    if (this.nums >= +this.goods.kucun) {
			        uni.showToast({
			        	title:'已达到最大库存',
						icon:'none'
			        })
			        return false;
			    }
			
			    this.nums++;
			   
			},
			addcart(){
				uni.showToast({
					title:'加入成功',
				})
				this.isshow = false;
				this.istan = false;
			}
			
		}
	}
</script>

<style lang="scss">
	.line{
		width: 100%;
		height: 10upx;
		background-color: #f6f6f6;
	}
	page{
		background-color: #fff;
		padding-bottom: 100upx;
	}
	.currentIndex{
		position: absolute;
		bottom: 10upx;
		right: 20upx;
		padding: 6upx 16upx;
		line-height: 1;
		background-color: rgba(0,0,0,.3);
		border-radius: 100upx;
		font-size: 26upx;
		color: hsla(0,0%,100%,.8);
	}
	.swiper{
		width: 100%;
		height: 750upx;
		&-item{
			width: 100%;
			height: 100%;
			&-image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.detail_price{
		width: 100%;
		box-sizing: border-box;
		padding: 20upx;
		height: fit-content;
		background-image: url("@/static/detail_price_score_bg.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		&_item{
			color: #fff;
			font-size: 24upx;
			display: flex;
			align-items: baseline;
		}
		&_oldprice{
			font-weight: 500;
			font-size: 24upx;
			color: #fff;
			padding-top: 10upx;
			display: flex;
			align-items: center;
			height: fit-content;
			&_old{
				text-decoration: line-through;
			}
			&_line{
				display: inline-block;
				margin: 0 20upx;
				width: 1px;
				height: 24upx;
				background-color: #fff;
			}
		}
	}
	.detail_info{
		width: 100%;
		box-sizing: border-box;
		padding: 20upx;
		&_title{
			font-size: 28upx;
			font-weight: 600;
			line-height: 42upx;
		}
		&_desc{
			color: #f44336;
			font-size: 24upx;
			font-weight: 500;
			line-height: 42upx;
			margin-top: 10upx;
		}
	}
	.detail_serve{
		box-sizing: border-box;
		padding: 0 20upx;
		display: flex;
		align-items: center;
		height: 82upx;
		position: relative;
		&_item{
			margin-right: 20upx;
			height: 100%;
			display: flex;
			align-items: center;
			>image{
				width: 30upx;
				height: 30upx;
			}
			>text{
				color: #303133;
				font-size: 28upx;
				margin-left: 10upx;
			}
		}
	}
	.detail_contentbox{
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-bottom: 0.5px solid hsla(0,0%,87.5%,.8);
		&_item{
			flex: 1;
			font-size: 30upx;
			font-weight: 700;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			position: relative;
		}
		.active{
			display: flex;
			justify-content: center;
			&::before{
				content: "";
				width: 120upx;
				position: absolute;
				height: 2px;
				background-color: #a8700d;
				bottom: 0;
			}
		}
	}
	.detail_bottom{
		width: 100%;
		height: 100upx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		border-top: 0.5px solid #eee;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20upx;
		&_item{
			display: flex;
			flex-direction: column;
			align-items: center;
			>image{
				width: 46upx;
				height: 46upx;
			}
			>text{
				color: #303133;
				font-size: 22upx;
				padding-top: 8upx;
			}
		}
		&_buybtn{
			// box-shadow: 0 6upx 6upx 0 rgb(229 138 0 / 22%);
			width: 600upx;
			line-height: 80upx;
			background: linear-gradient(90deg,#3185f3,#50cdf2);
			// box-shadow: 0 14upx 12upx 0 rgb(80 205 242 / 20%)
			border-radius: 40upx;
			font-size: 30upx;
			font-weight: 500;
			color: #fff;

			text-align: center;
		}
	}
	.popup_content{
		width: 100%;
		min-height: 200upx;
		position: fixed;
		z-index: 1002;
		bottom: 0;
		background-color: #fff;
		border-radius: 20upx 20upx 0 0;
		transition: all ease .3s;
	}
	
	.popshadow{
			width:100%;
			background: rgba(0,0,0,0.4);
			position: fixed;
			left:0;
			top:0;
			height: 100vh;
			z-index: 9990;
			transition: all 0.3s ease;
		}
	.popcontent {
	    width: 100%;
	    border-radius: 20rpx 20rpx 0 0;
	    background: #fff;
	    position: fixed;
	    left: 0;
	    bottom: -100%;
	    min-height: 260rpx;
	    z-index: 9992;
	    transition: all 0.3s ease;
	}
	.popcontent .close {
	    width: 48rpx;
	    height: 48rpx;
	    position: absolute;
	    right: 30rpx;
	    top: -60rpx;
	}
	.popcontent .goodinfo {
	    width: 90%;
	    height: 176rpx;
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	    margin: 50rpx auto;
	}
	.popcontent .goodinfo > image {
	    width: 176rpx;
	    height: 176rpx;
	    margin-right: 40rpx;
	}
	.popcontent .goodinfo > view {
	    width: 452rpx;
	    height: 176rpx;
	    display: flex;
	    align-items: flex-start;
	    flex-direction: column;
	    justify-content: space-between;
	}
	.popcontent .goodinfo > view .goodname {
	    font-size: 32rpx;
	    color: #000;
	    font-weight: bold;
	    display: block;
	    width: 100%;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}
	.popcontent .goodinfo > view .price {
	    width: 100%;
	    display: flex;
	    align-items: flex-end;
	    justify-content: space-between;
	}
	.popcontent .goodinfo > view .price view text {
	    font-size: 32rpx;
	    color: #000;
	    font-weight: bold;
	}
	.popcontent .goodinfo > view .price view text text {
	    font-size: 20rpx;
	    font-weight: normal;
	}
	.popcontent .goodinfo > view .price view > text:nth-child(2) {
	    text-decoration: line-through;
	    color: #c7c7c7;
	    font-size: 20rpx;
	    margin-left: 10rpx;
	    font-weight: normal;
	}
	.popcontent .goodinfo > view .caozuo {
	    width: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	}
	.popcontent .goodinfo > view .caozuo > text {
	    font-size: 24rpx;
	    color: rgba(0, 0, 0, 0.8);
	}
	.popcontent .goodinfo > view .caozuo view {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	}
	.popcontent .goodinfo > view .caozuo view image {
	    width: 28rpx;
	    height: 28rpx;
	}
	.popcontent .goodinfo > view .caozuo view text {
	    font-size: 24rpx;
	    color: #000;
	    margin: 0 20rpx;
	    width: 74rpx;
	    height: 56rpx;
	    background: #f1f1f1;
	    opacity: 1;
	    border-radius: 8rpx;
	    text-align: center;
	    line-height: 56rpx;
	}
	.goodbtn {
	    width: 686rpx;
	    border: 1px solid #cccccc;
	    border-radius: 16rpx;
	    margin: 10rpx auto;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	}
	.tuiguangma {
	    width: 16rpx !important;
	    height: 28rpx !important;
	}
	.cartnum {
	    width: 14rpx;
	    height: 14rpx;
	    background-color: #eb4800;
	    border-radius: 50%;
	    position: absolute;
	    right: 0;
	    top: 0;
	}
	.goodbtn text {
	    width: 50%;
	    height: 80rpx;
	    display: block;
	    text-align: center;
	    line-height: 80rpx;
	    color: '';
	    margin: 0 auto;
	}
	.goodbtn text:nth-child(1) {
	}
	.goodbtn text:nth-child(2) {
	    background: linear-gradient(90deg,#3185f3,#50cdf2);
	    font-size: 28upx;
	    font-weight: 500;
	    color: hsla(0,0%,100%,.9);
	    border-radius: 0 16rpx 16rpx 0;
	}
	
	.savetext {
	    width: 100%;
	    height: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.buynum {
	    width: 686rpx;
	    margin: 0 auto 22rpx;
	    text-align: right;
	    color: #747474;
	    font-size: 28rpx;
	}
	
	.popout{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	.popout .shadow{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, .6);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
	}
	.pop-content{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background-color: #fff;
		z-index: 101;
		width: fit-content;
		height: fit-content;
		border-radius: 20px;
	}
</style>
